<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

<body data-type="index">

    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"/>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/memu.jsp"/>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div id="cards" class="row  am-cf">
                    



                </div>

                <div id="main" style="width: 600px;height:400px;"></div>

               

 <div class="am-u-sm-12 am-u-md-12 am-u-lg-6">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">最近十笔流水</div>
                                <div class="widget-function am-fr">
                                    
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-bordered am-table-radius am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody id="flows">
                                        <tr class="gradeX">
                                            <td>6222*****196</td>
                                            <td>200.00</td>
                                            <td>存款</td>
                                            <td>2017-11-26</td>
                                        </tr>
                                        <!-- more data -->
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </div>
    </div>
    </div>


</body>

<script>
    $(document).ready(function () {
        loadMyCard();
        top10Flow();
        $('#home').addClass('active')


    })

    //加载银行卡统计信息
    function loadCardStaticsInfo(cardId) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        atm.ajax({
            url : '/flow/cardFlowStatisitData',
            requestMethod : 'GET',
            data : {
                cardId : cardId
            },
            success : function (responseData) {
                var statictInfo = responseData.data;

                //得到统计数据
                // 指定图表的配置项和数据
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: [ '支出', '收入']
                    },
                    series: [
                        {
                            name: statictInfo.cardNum,
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: statictInfo.expenditureAmount, name: '支出'},
                                {value: statictInfo.incomeAmount, name: '收入'}
                            ]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })



    }

    function loadMyCard() {
        atm.ajax({
            url : '/card/loadMyCard',
            requestMethod : 'GET',
            data : {
            },
            success : function (responseData) {
                let msg = '';
                let cards = responseData.data;
                for (let i=0; i<cards.length; i++) {
                    let card = cards[i];
                    msg += '<div class="am-u-sm-12 am-u-md-6 am-u-lg-4" onclick="loadCardStaticsInfo('+card.cardId+')">\n' +
                        '                        <div class="widget widget-primary am-cf">\n' +
                        '                            <div class="widget-statistic-header">\n' +
                        '                                '+card.cardNum+'\n' +
                        '                            </div>\n' +
                        '                            <div class="widget-statistic-body">\n' +
                        '                                <div class="widget-statistic-value">\n' +
                        '                                    ￥'+card.amount+'\n' +
                        '                                </div>\n' +
                        '                                <div class="widget-statistic-description">\n' +
                        '                                    \n' +
                        '                                </div>\n' +
                        '                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </div>';
                }

                console.log(msg);
                $('#cards').html(msg);
            }
        })
    }

    function top10Flow() {
        atm.ajax({
            url : '/flow/loadTop10',
            requestMethod : 'GET',
            data : {
            },
            success : function (responseData) {
                let flows = responseData.data;
                let msg = '';

                for (let i=0; i<flows.length; i++) {
                    let flow = flows[i];
                    msg += '<tr class="gradeX">\n' +
                        '                                            <td>'+flow.cardNum+'</td>\n' +
                        '                                            <td>'+flow.amount+'</td>\n' +
                        '                                            <td>'+flow.remark+'</td>\n' +
                        '                                            <td>'+flow.createTime+'</td>\n' +
                        '                                        </tr>';
                }

                console.log(msg);
                $('#flows').html(msg);
            }
        })
    }
</script>

</html>